<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>iView</title>
    <link rel="stylesheet" href="../assets/css/iview.css">
    <link rel="stylesheet" href="../assets/css/app.css">
</head>
<body>
    <div id="app" v-cloak>
        <div class="title" v-show="status === 'options'">iView - {{ $t("message.newProject") }}</div>
        <div class="title" v-show="status === 'log' && titleStatus === 1">
            iView - {{ $t("message.creating") }}
            <Icon type="load-c" class="ivu-load-loop"></Icon>
        </div>
        <div class="title" v-show="status === 'log' && titleStatus === 2">
            iView - {{ $t("message.createDone") }}
            <Icon type="ios-checkmark-outline" color="#00cc66"></Icon>
        </div>
        <div class="title" v-show="status === 'log' && titleStatus === 3">
            iView - {{ $t("message.creatingError") }}
            <Icon type="ios-close-outline"  color="#ff5500"></Icon>
        </div>
        <div class="title" v-show="status === 'next'">iView - {{ $t("message.moreConf") }}</div>
        <div class="create-app">
            <div class="create-form" v-show="status === 'options'">
                <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110">
                    <Form-item :label="'iView '+$t('message.version')+'：'" prop="iviewVersion">
                        <Radio-group v-model="formValidate.iviewVersion">
                            <Radio label="2.x">2.7.3</Radio>
                        </Radio-group>
                    </Form-item>
                    <Form-item :label="'CSS '+$t('message.pretreatment')+'：'" prop="css">
                        <Checkbox-group v-model="formValidate.css">
                            <Checkbox label="less"></Checkbox>
                            <Checkbox label="sass"></Checkbox>
                        </Checkbox-group>
                    </Form-item>
                    <Form-item label="Ajax：" prop="ajax">
                        <div slot="label">
                            <span>Ajax</span>
                            <Tooltip :content="$t('message.basedOn')+' axios'">
                                <Icon type="ios-help" size="14" color="#3399ff"></Icon>
                            </Tooltip>
                            <span>：</span>
                        </div>
                        <i-switch v-model="formValidate.ajax">
                            <Icon type="android-done" slot="open"></Icon>
                            <Icon type="android-close" slot="close"></Icon>
                        </i-switch>
                    </Form-item>
                    <Form-item :label="$t('message.multilingual')+'：'" prop="i18n">
                        <div slot="label">
                            <span>{{ $t('message.multilingual') }}</span>
                            <Tooltip :content="$t('message.basedOn')+' vue-i18n'">
                                <Icon type="ios-help" size="14" color="#3399ff"></Icon>
                            </Tooltip>
                            <span>：</span>
                        </div>
                        <i-switch v-model="formValidate.i18n">
                            <Icon type="android-done" slot="open"></Icon>
                            <Icon type="android-close" slot="close"></Icon>
                        </i-switch>
                    </Form-item>
                    <Form-item :label="$t('message.stateManagement')+'：'" prop="store">
                        <Checkbox-group v-model="formValidate.store">
                            <Checkbox label="vuex"></Checkbox>
                            <Checkbox label="bus.js"></Checkbox>
                        </Checkbox-group>
                    </Form-item>
                    <Form-item :label="$t('message.charts')+'：'" prop="chart">
                        <Checkbox-group v-model="formValidate.chart">
                            <Checkbox label="echarts"></Checkbox>
                        </Checkbox-group>
                    </Form-item>
                    <Form-item label="ESLint：" prop="eslint">
                        <i-switch v-model="formValidate.eslint">
                            <Icon type="android-done" slot="open"></Icon>
                            <Icon type="android-close" slot="close"></Icon>
                        </i-switch>
                    </Form-item>
                    <Form-item :label="$t('message.others')+'：'" prop="funs">
                        <Checkbox-group v-model="formValidate.funs">
                            <Checkbox label="cookies">Cookie（js-cookie）</Checkbox>
                            <Checkbox label="clipboard">{{ $t('message.copy') }}（clipboard）</Checkbox>
                            <Checkbox label="html2canvas">{{ $t('message.html2canvas') }}(html2canvas)</Checkbox>
                            <Checkbox label="rasterizehtml">{{ $t('message.rasterizeHtml') }}(rasterizeHTML)</Checkbox>
                        </Checkbox-group>
                    </Form-item>
                    <a href="javascript:void(0)" class="create-app-more" v-if="!showMore" @click="handleShowMore">
                        <span>{{ $t('message.showMoreConf') }}</span>
                        <Icon type="ios-arrow-down"></Icon>
                    </a>
                    <div class="create-app-more-item" v-if="showMore">
                        <Form-item :label="$t('message.projectName')+'：'" prop="name">
                            <i-input v-model="formValidate.name" :placeholder="$t('message.projectNamePlaceholder')"></i-input>
                        </Form-item>
                        <Form-item :label="$t('message.versionUpercase')+'：'" prop="version">
                            <i-input v-model="formValidate.version" :placeholder="$t('message.versionPlaceholder')"></i-input>
                        </Form-item>
                        <Form-item :label="$t('message.projectIntro')+'：'" prop="desc">
                            <i-input type="textarea" v-model="formValidate.desc" :placeholder="$t('message.projectIntroPlaceholder')+'...'"></i-input>
                        </Form-item>
                        <Form-item :label="'Git '+$t('message.link')+'：'" prop="git">
                            <i-input v-model="formValidate.git" :placeholder="$t('message.gitLinkPlaceholder')"></i-input>
                        </Form-item>
                    </div>
                </i-form>
                <Row class="create-app-submit">
                    <i-col span="11" offset="2">
                        <i-button type="primary" long @click="handleSubmit('formValidate')">{{ $t('message.createProject') }}</i-button>
                    </i-col>
                    <i-col span="10" offset="1">
                        <i-button type="ghost" long @click="handleReset('formValidate')" style="margin-left: 8px">{{ $t('message.reset') }}</i-button>
                    </i-col>
                </Row>
            </div>
            <div class="create-info" v-show="status === 'log'">
                <log :status="log.package" :content="$t('message.create')+' package.json'"></log>
                <log :status="log.babel" :content="$t('message.create')+' .babelrc'"></log>
                <log :status="log.webpackBase" :content="$t('message.create')+' webpack '+$t('message.basicConfFile')"></log>
                <log :status="log.webpackDev" :content="$t('message.create')+' webpack '+$t('message.devConfFile')"></log>
                <log :status="log.webpackProd" :content="$t('message.create')+' webpack '+$t('message.proConfFile')"></log>
                <log :status="log.vendors" :content="$t('message.create')+' vendors.js'"></log>
                <log :status="log.router" :content="$t('message.create')+' '+$t('message.routerConfFile')+' router.js'"></log>
                <log :status="log.i18n" :content="$t('message.create')+' '+$t('message.multilingualConfFile')+' locale.js'" v-if="formValidate.i18n"></log>
                <log :status="log.app" :content="$t('message.create')+' '+$t('message.routerMountRootComponent')+' app.vue'"></log>
                <log :status="log.template" :content="$t('message.create')+' '+$t('message.indexTemplate')+' index.ejs'"></log>
                <log :status="log.indexHtml" :content="$t('message.create')+' '+$t('message.index')+' index.html'"></log>
                <log :status="log.indexVue" :content="$t('message.create')+' '+$t('message.indexComponent')+' index.vue'"></log>
                <log :status="log.main" :content="$t('message.create')+' '+$t('message.mainFile')+' main.js'"></log>
                <log :status="log.config" :content="$t('message.create')+' '+$t('message.confFile')+' config.js'"></log>
                <log :status="log.util" :content="$t('message.create')+' '+$t('message.toolsetFile')+' util.js'"></log>
                <log :status="log.bus" :content="$t('message.create')+' '+$t('message.centralEventBusFile')+' bus.js'" v-if="formValidate.store.indexOf('bus.js') > -1"></log>
                <log :status="log.eslintRc" :content="$t('message.create')+' ESLint '+$t('message.confFile')+' .eslintrc.json'" v-if="formValidate.eslint"></log>
                <log :status="log.eslintIgnore" :content="$t('message.create')+' ESLint '+$t('message.ignoreFile')+' .eslintignore'" v-if="formValidate.eslint"></log>
                <log :status="log.gitignore" :content="$t('message.create')+' .gitignore'"></log>
                <log :status="log.editorconfig" :content="$t('message.create')+' .editorconfig'"></log>

                <Row class="create-app-submit create-info-submit">
                    <i-col span="12" offset="1">
                        <i-button type="success" long @click="handleNext" icon="ios-information" :disabled="titleStatus !== 2">{{ $t('message.furtherConf') }}</i-button>
                    </i-col>
                    <i-col span="10" offset="0">
                        <i-button type="ghost" long @click="handleOpenDirectory" style="margin-left: 8px" icon="folder">{{ $t('message.openDirectory') }}</i-button>
                    </i-col>
                </Row>
            </div>
            <div class="create-next" v-show="status === 'next'">
                <Alert show-icon>
                    <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
                    <span slot="desc">
                        iView Cli {{ $t('message.hasSaveAt') }}<a href="javascript:void(0)" @click="handleOpenDirectory">&nbsp;{{ $t('message.directory') }}</a>，{{ $t('message.whatToDoNext') }}
                    </span>
                </Alert>
                <Alert>{{ $t('message.installSomeToolsFirst') }}</Alert>
                <h4>{{ $t('message.installDependencies') }}</h4>
                <code>$ npm install</code>
                <h4>{{ $t('message.startService') }}</h4>
                <code>$ npm run dev</code>
                <p>
                    {{ $t('message.openWebsiteLeftText') }}&nbsp;<a href="javascript:void(0)" @click="handleOpenLink('http://127.0.0.1:8080')">http://127.0.0.1:8080</a> {{ $t('message.openWebsiteRightText') }}
                </p>
                <p></p>
                <h4>{{ $t('message.compileAndPackage') }}</h4>
                <code>$ npm run build</code>
                <template v-if="formValidate.ajax">
                    <h4>{{ $t('message.config') }} Ajax</h4>
                    <p>iView {{ $t('message.axiosLeftText') }} <strong>axios</strong> {{ $t('message.axiosMiddleText') }} <a href="javascript:void(0)" @click="handleOpenFile('src/libs/util.js')">src/libs/util.js</a> {{ $t('message.axiosRightText') }}</p>
                </template>
                <h4>{{ $t('message.modifyHtmlTemplate') }}</h4>
                <p>{{ $t('message.modifyIndexLeftText') }} <a href="javascript:void(0)" @click="handleOpenFile('src/template/index.ejs')">src/template/index.ejs</a> {{ $t('message.modifyIndexRightText') }}</p>
                <template v-if="formValidate.i18n">
                    <h4>{{ $t('message.multilingual') }}</h4>
                    <p>iView {{ $t('message.multiLanguageConfLeftText') }} <a href="javascript:void(0)" @click="handleOpenFile('src/main.js')">src/main.js</a> {{ $t('message.multiLanguageConfMiddleText') }} <a href="javascript:void(0)" @click="handleOpenFile('src/locale.js')">src/locale.js</a> {{ $t('message.multiLanguageConfRightText') }}</p>
                </template>
                <template v-if="formValidate.eslint">
                    <h4>ESLint</h4>
                    <p>{{ $t('message.useESLint') }}：</p>
                    <code>$ npm run lint</code>
                </template>
                <Row class="create-app-submit create-info-submit">
                    <i-col span="10" offset="2">
                        <i-button type="primary" long @click="handleBackHome" icon="ios-home">{{ $t('message.backHome') }}</i-button>
                    </i-col>
                    <i-col span="10" offset="2">
                        <i-button type="ghost" long @click="handleOpenDirectory" style="margin-left: 8px" icon="folder">{{ $t('message.openDirectory') }}</i-button>
                    </i-col>
                </Row>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../assets/js/vue.min.js"></script>
    <script type="text/javascript" src="../assets/js/iview.min.js"></script>
    <script type="text/javascript" src="../assets/js/vue-i18n.js"></script>
    <script type="text/javascript" src="../src/create.js"></script>
</body>
</html>